<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>MyPetStore Management</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="/css/view.css">
    <link rel="stylesheet" href="/js/jquery.min.js">
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

</head>
<body class="layui-layout-body">

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">JPetStore后台管理</div>

        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item" >
                <a href="javascript:;" name="side"><i class="layui-icon">&#xe668;</i></a>
            </li>
        </ul>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="/home"><i class="layui-icon" style="font-size: 20px;">&#xe68e;</i>&nbsp home</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <p th:text="${session.account?.username}"></p>
                </a>
                <dl class="layui-nav-child">
                    <dd><a name="manager">基本资料</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="/exit"><i class="layui-icon" style="font-size: 15px; color: #1E9FFF;">&#xe682;</i>退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;"><i class="layui-icon" >&#xe698;</i>  <span>商品管理</span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="/categories"><i class="layui-icon" >&#xe610;</i>  <span>大类</span></a></dd>
                        <dd><a href="/products"><i class="layui-icon" >&#xe68c;</i>  <span>小类</span></a></dd>
                        <dd><a href="/items"><i class="layui-icon" >&#xe691;</i>  <span>商品</span></a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="/accounts"><i class="layui-icon" >&#xe66f;</i>  <span>用户管理</span></a></li>
                <li class="layui-nav-item"><a href="/orders"><i class="layui-icon" >&#xe609;</i>  <span>订单管理</span></a></li>





                <li class="layui-nav-item"><a href="/log"><i class="layui-icon" >&#xe68d;</i>  <span>日志查看</span></a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <div class="layui-view-body">
            <div class="layui-content">
                <div class="layui-row layui-col-space20">
                    <div class="layui-col-sm6 layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-body chart-card">
                                <div class="chart-header">
                                    <div class="metawrap">
                                        <div class="meta">
                                            <span><a href="/accounts">总用户数</a></span>
                                        </div>
                                        <div class="total"><a th:text="${accountNumber}">text</a></div>
                                    </div>
                                </div>
                                <div class="chart-body">
                                    <div class="contentwrap">
                                        <a href="/accounts">
                                            包括已注册的用户
                                        </a>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm6 layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-body chart-card">
                                <div class="chart-header">
                                    <div class="metawrap">
                                        <div class="meta">
                                            <span><a href="/log">总浏览量</a></span>
                                        </div>
                                        <div class="total"><a th:text="${viewNumber}">text</a></div>
                                    </div>
                                </div>
                                <div class="chart-body">
                                    <div class="contentwrap">
                                        <a href="/log">
                                            用户浏览页面次数
                                        </a>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm6 layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-body chart-card">
                                <div class="chart-header">
                                    <div class="metawrap">
                                        <div class="meta">
                                            <span><a href="/orders">订单总数</a></span>
                                        </div>
                                        <div class="total"><a th:text="${orderNumber}">text</a></div>
                                    </div>
                                </div>
                                <div class="chart-body">
                                    <div class="contentwrap">
                                        <a href="/orders">
                                            用户生成的订单
                                        </a>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm6 layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-body chart-card">
                                <div class="chart-header">
                                    <div class="metawrap">
                                        <div class="meta">
                                            <span><a href="/ordersunsent">未发货订单数</a> </span>
                                        </div>
                                        <div class="total"><a th:text="${unSent}">text</a></div>
                                    </div>
                                </div>
                                <div class="chart-body">
                                    <div class="contentwrap">
                                        没有发货的订单
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>


                    <!--                    -->
                    <!--                    <div class="layui-col-sm12 layui-col-md12">-->
                    <!--                        <div class="layui-card">-->
                    <!--                            <div class="layui-tab layui-tab-brief">-->
                    <!--                                <ul class="layui-tab-title">-->
                    <!--                                    <li class="layui-this">销售额</li>-->
                    <!--                                    <li>销量</li>-->
                    <!--                                </ul>-->
                    <!--                                <div class="layui-tab-content">-->
                    <!--                                    <div class="layui-tab-item layui-show">-->
                    <!--                                        <div class="layui-view-body">-->
                    <!--                                            <div id="main2" style="width: 800px;height:500px;"></div>-->


                    <!--                                            <script type="text/javascript">-->
                    <!--                                                // 基于准备好的dom，初始化echarts实例-->
                    <!--                                                var myChart = echarts.init(document.getElementById('main2'));-->

                    <!--                                                // 指定图表的配置项和数据-->

                    <!--                                                var option = {-->
                    <!--                                                    title: {-->
                    <!--                                                        text: '去年营业额',-->
                    <!--                                                    },-->

                    <!--                                                    tooltip: {-->
                    <!--                                                        trigger: 'axis'-->
                    <!--                                                    },-->
                    <!--                                                    legend: {-->
                    <!--                                                        data: ['销售额', '盈利']-->
                    <!--                                                    },-->
                    <!--                                                    toolbox: {-->
                    <!--                                                        show: true,-->
                    <!--                                                        feature: {-->
                    <!--                                                            dataView: {show: true, readOnly: false},-->
                    <!--                                                            magicType: {show: true, type: ['line', 'bar']},-->
                    <!--                                                            restore: {show: true},-->
                    <!--                                                            saveAsImage: {show: true}-->
                    <!--                                                        }-->
                    <!--                                                    },-->
                    <!--                                                    calculable: true,-->
                    <!--                                                    xAxis: [-->
                    <!--                                                        {-->
                    <!--                                                            type: 'category',-->
                    <!--                                                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']-->
                    <!--                                                        }-->
                    <!--                                                    ],-->
                    <!--                                                    yAxis: [-->
                    <!--                                                        {-->
                    <!--                                                            type: 'value',-->
                    <!--                                                            axisLabel: {-->
                    <!--                                                                formatter: '{value} 万元'-->
                    <!--                                                            }-->
                    <!--                                                        }-->
                    <!--                                                    ],-->
                    <!--                                                    series: [-->
                    <!--                                                        {-->
                    <!--                                                            name: '销售额',-->
                    <!--                                                            type: 'bar',-->
                    <!--                                                            data: [15.5, 13.9, 14.0, 15, 15.6, 13.7, 22.6, 21.2, 14.2, 15.0, 13.4, 14.1],-->
                    <!--                                                            markPoint: {-->
                    <!--                                                                data: [-->
                    <!--                                                                    {type: 'max', name: '最大值'},-->
                    <!--                                                                    {type: 'min', name: '最小值'}-->
                    <!--                                                                ]-->
                    <!--                                                            },-->
                    <!--                                                            markLine: {-->
                    <!--                                                                data: [-->
                    <!--                                                                    {type: 'average', name: '平均值'}-->
                    <!--                                                                ]-->
                    <!--                                                            }-->
                    <!--                                                        },-->
                    <!--                                                        {-->
                    <!--                                                            name: '盈利',-->
                    <!--                                                            type: 'bar',-->
                    <!--                                                            data: [5.5, 4.9, 7.0, 7, 5.6, 6.7, 15.6, 12.2, 5.2, 9.0, 6.4, 6.1],-->
                    <!--                                                            markPoint: {-->
                    <!--                                                                data: [-->
                    <!--                                                                    {type: 'max', name: '最大值'},-->
                    <!--                                                                    {type: 'min', name: '最小值'}-->
                    <!--                                                                ]-->
                    <!--                                                            },-->
                    <!--                                                            markLine: {-->
                    <!--                                                                data: [-->
                    <!--                                                                    {type: 'average', name: '平均值'}-->
                    <!--                                                                ]-->
                    <!--                                                            }-->
                    <!--                                                        }-->
                    <!--                                                    ]-->
                    <!--                                                };-->
                    <!--                                                myChart.setOption(option);-->
                    <!--                                            </script>-->
                    <!--                                        </div>-->
                    <!--                                    </div>-->
                    <!--                                    <div class="layui-tab-item">-->
                    <!--                                        <div class="layui-view-body">-->
                    <!--                                            <div id="main4" style="width: 800px;height:500px;"></div>-->


                    <!--                                            <script type="text/javascript">-->
                    <!--                                                // 基于准备好的dom，初始化echarts实例-->
                    <!--                                                var myChart = echarts.init(document.getElementById('main4'));-->

                    <!--                                                // 指定图表的配置项和数据-->

                    <!--                                                setTimeout(function () {-->

                    <!--                                                    option = {-->
                    <!--                                                        title: {-->
                    <!--                                                            text: '去年销量',-->
                    <!--                                                        },-->
                    <!--                                                        legend: {},-->
                    <!--                                                        tooltip: {-->
                    <!--                                                            trigger: 'axis',-->
                    <!--                                                            showContent: false-->
                    <!--                                                        },-->
                    <!--                                                        dataset: {-->
                    <!--                                                            source: [-->
                    <!--                                                                ['product', '一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月'],-->
                    <!--                                                                ['BIRDS', 12, 13, 10, 13, 9, 23, 21, 20,23,15,20,22],-->
                    <!--                                                                ['CATS', 22, 18, 19, 23, 29, 33, 31,33,39,29,31,33],-->
                    <!--                                                                ['DOGS', 15, 23, 20, 15, 19, 33, 41,23, 29, 33, 31,33],-->
                    <!--                                                                ['FISH', 55,54,68,75,64,62,69,60,58,59,63,66],-->
                    <!--                                                                ['REPTILES', 5,9,10,11,6,3,8,7,5,3,4,8]-->
                    <!--                                                            ]-->
                    <!--                                                        },-->
                    <!--                                                        xAxis: {type: 'category'},-->
                    <!--                                                        yAxis: {gridIndex: 0},-->
                    <!--                                                        grid: {top: '55%'},-->
                    <!--                                                        series: [-->
                    <!--                                                            {type: 'line', smooth: true, seriesLayoutBy: 'row'},-->
                    <!--                                                            {type: 'line', smooth: true, seriesLayoutBy: 'row'},-->
                    <!--                                                            {type: 'line', smooth: true, seriesLayoutBy: 'row'},-->
                    <!--                                                            {type: 'line', smooth: true, seriesLayoutBy: 'row'},-->
                    <!--                                                            {type: 'line', smooth: true, seriesLayoutBy: 'row'},-->
                    <!--                                                            {-->
                    <!--                                                                type: 'pie',-->
                    <!--                                                                id: 'pie',-->
                    <!--                                                                radius: '30%',-->
                    <!--                                                                center: ['50%', '25%'],-->
                    <!--                                                                label: {-->
                    <!--                                                                    formatter: '{b}: {@一月} ({d}%)'-->
                    <!--                                                                },-->
                    <!--                                                                encode: {-->
                    <!--                                                                    itemName: 'product',-->
                    <!--                                                                    value: '一月',-->
                    <!--                                                                    tooltip: '一月'-->
                    <!--                                                                }-->
                    <!--                                                            }-->
                    <!--                                                        ]-->
                    <!--                                                    };-->

                    <!--                                                    myChart.on('updateAxisPointer', function (event) {-->
                    <!--                                                        var xAxisInfo = event.axesInfo[0];-->
                    <!--                                                        if (xAxisInfo) {-->
                    <!--                                                            var dimension = xAxisInfo.value + 1;-->
                    <!--                                                            myChart.setOption({-->
                    <!--                                                                series: {-->
                    <!--                                                                    id: 'pie',-->
                    <!--                                                                    label: {-->
                    <!--                                                                        formatter: '{b}: {@[' + dimension + ']} ({d}%)'-->
                    <!--                                                                    },-->
                    <!--                                                                    encode: {-->
                    <!--                                                                        value: dimension,-->
                    <!--                                                                        tooltip: dimension-->
                    <!--                                                                    }-->
                    <!--                                                                }-->
                    <!--                                                            });-->
                    <!--                                                        }-->
                    <!--                                                    });-->
                    <!--                                                    myChart.setOption(option);-->
                    <!--                                                });-->

                    <!--                                            </script>-->
                    <!--                                        </div>-->
                    <!--                                    </div>-->
                    <!--                                </div>-->
                    <!--                            </div>-->
                    <!--                        </div>-->
                    <!--                    </div>-->



                </div>
            </div>
        </div>
    </div>






</div>

<!--用户信息-->
<script type="text/html" id="account_fields">

    <div class="layui-form-item" style="margin-top: 20px">
        <label class="layui-form-label">用户名:</label>
        <div class="layui-input-block" style="margin-right: 20px">
            <input type="text" name="username" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="text-align: center">
        <label>账户信息</label>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">名:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="firstName" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">姓:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="lastName" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">邮箱:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="email" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">手机:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="phone" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">地址1:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="address1" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">地址2:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="address2" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">所在城市:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="city" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">所在州:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="state" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">邮政编码:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="zip" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">所在国家:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="country" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="text-align: center">
        <label>个人资料信息</label>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">语言偏好:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <select name="languagePreference">
                <option value="Chinese">Chinese</option>
                <option value="English">English</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">最喜欢的商品大类:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <select name="favouriteCategoryId">
                <option th:each="category:${categories}" th:value="${category.categoryId}" th:text="${category.categoryId}"></option>
            </select>
        </div>
    </div>

</script>

<script src="layui/layui.js"></script>


<script th:inline="javascript">
    layui.use(['element', 'form', 'layer', 'table'], function() {
        var element = layui.element;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;

        var isShow = true;  //定义一个标志位
        $("[name='side']").on("click", function () {
            //选择出所有的span，并判断是不是hidden
            $('.layui-nav-item span').each(function(){
                if($(this).is(':hidden')){
                    $(this).show();
                }else{
                    $(this).hide();
                }
            });
            //判断isshow的状态
            if(isShow){
                $('.layui-side.layui-bg-black').width(60); //设置宽度
                // $('.kit-side-fold i').css('margin-right', '70%');  //修改图标的位置
                //将footer和body的宽度修改
                $('.layui-body').css('left', 60+'px');
                $('.layui-footer').css('left', 60+'px');
                //将二级导航栏隐藏
                $('dd span').each(function(){
                    $(this).hide();
                });
                //修改标志位
                isShow =false;
            }else{
                $('.layui-side.layui-bg-black').width(200);
                // $('.kit-side-fold i').css('margin-right', '10%');
                $('.layui-body').css('left', 200+'px');
                $('.layui-footer').css('left', 200+'px');
                $('dd span').each(function(){
                    $(this).show();
                });
                isShow =true;
            }
        });

        var routing = [[${session.account.username}]];
        var username=[[${session.account.username}]];
        var firstname=[[${session.account.firstName}]];
        var lastName=[[${session.account.lastName}]];
        var email=[[${session.account.email}]];
        var phone=[[${session.account.phone}]];
        var address1=[[${session.account.address1}]];
        var address2=[[${session.account.address2}]];
        var city=[[${session.account.city}]];
        var state=[[${session.account.state}]];
        var zip=[[${session.account.zip}]];
        var country=[[${session.account.country}]];

        $("[name='manager']").on("click", function () {
            var modifyBtn = $(this);
            layer.open({
                type: 1,title: false,closeBtn: false,area: '500px;',shade: 0.8,id: 'demo',btn: ['确认', '取消'],btnAlign: 'c',moveType: 1
                ,content: '<form id="form" class="layui-form" method="post">\n' +
                    '<input type="hidden" name="_method" value="put">' +
                    $("#account_fields").html() +
                    '</form>'
                , success: function (layero) {
                    $.ajax({
                        type: "GET", async: false,
                        url:"/accounts/"+routing,
                        success: function (data) {
                            $("#form").attr({"action": "/accounts/"+ routing + "/password"});
                            console.log(data);
                            var account = JSON.parse(data);
                            $("#form [name='username']").attr({"value": username, "readonly": "readonly"}).css("color","#999999");
                            $("#form [name='firstName']").attr({"value": firstname});
                            $("#form [name='lastName']").attr({"value": lastName});
                            $("#form [name='email']").attr({"value": email});
                            $("#form [name='phone']").attr({"value": phone});
                            $("#form [name='address1']").attr({"value": address1});
                            $("#form [name='address2']").attr({"value": address2});
                            $("#form [name='city']").attr({"value": city});
                            $("#form [name='state']").attr({"value": state});
                            $("#form [name='zip']").attr({"value": zip});
                            $("#form [name='country']").attr({"value": country});
                            $("#form option[value="+account.languagePreference+"]").attr({"selected": "selected"});
                            $("#form option[value="+account.favouriteCategoryId+"]").attr({"selected": "selected"});
                        }
                    });
                    form.render();
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').on("click", function () {
                        console.log($("#form").serialize());
                        $("#form").submit();
                    });
                }
            });
        });
    });
</script>

</body>
</html>